<template>
    <div class="UserInfo" v-loading="loading">
        <!--       公共顶部-->
        <Top>
            <i class="el-icon-arrow-left back" slot="leftPart" @click="goback()"></i>
            <p class="title" slot="midPart">完善资料</p>
        </Top>
        <div class="main">
            <cube-scroll>
                <!--        表单-->
                <ul class="infoList">
                    <li class="clearfix headBox animated fadeInDown" style="animationDelay:0s">
                        <span class="title">头像</span>
                        <!--头像上传-->
                        <div class="avatar-wrapper clearfix">  
                            <input 
                                   id="avatarInput"
                                   type="file"  
                                   accept="image" 
                                   @change="handleAvatarUp">  
                            <transition name="fade">
                                <label for="avatarInput" class="avatarBtn">
                                    <img class="imgFull" :src="avatar || '/static/user.png'" alt="">
                                </label>
                            </transition>
                        </div> 
                        <i class="el-icon-arrow-right arrow"></i>
                    </li>
                    <!--昵称-->
                    <li class="clearfix animated fadeInDown" style="animationDelay:0.1s">
                        <span class="title">昵称</span>
                        <input type="text" class="text" placeholder="请设置昵称" v-model="name" />
                        <i class="el-icon-arrow-right arrow"></i>
                    </li>
                    <!--性别-->
                    <li class="clearfix animated fadeInDown" style="animationDelay:0.2s">
                        <span class="title">性别</span>
                        <div class="text">
                            <el-radio v-model="sex" label="2">男</el-radio>
                            <el-radio v-model="sex" label="1">女</el-radio>
                        </div>
                        <i class="el-icon-arrow-right arrow"></i>
                    </li>
                    <!--花艺心得-->
                    <li class="clearfix animated fadeInDown"  style="animationDelay:0.3s">
                        <span class="title">个人介绍</span>
                        <textarea class="text" placeholder="个人介绍" v-model="review"></textarea>
                        <i class="el-icon-arrow-right arrow"></i>
                    </li>
                    <!--花艺心得-->
                    <li class="clearfix animated fadeInDown"  style="animationDelay:0.4s">
                        <span class="title">花艺心得</span>
                        <textarea class="text" placeholder="谈谈您对花艺的心得体会" v-model="teacher_feeling"></textarea>
                        <i class="el-icon-arrow-right arrow"></i>
                    </li>
                </ul>
                <!--        个人相册-->
                <div class="album clearfix" >
                    <h3>个人相册<span>（上传最多4张图片展示您的风采）</span></h3>
                    <div class="album-wrapper clearfix">  
                        <input 
                               id="albumInput"
                               type="file"  
                               accept="image" 
                               @change="handleAlbumUp">  
                        <transition-group name="fade">
                            <div 
                                 class="file-item left animated bounceIn"
                                 :style="{animationDelay:delay(index)}"
                                 v-for="(file,index) in albumList" 
                                 :key="index">
                                <img class="imgFull" :src="file.url" alt="">
                                <div class="close" @click="removeAlbum(index)"><i class="el-icon-circle-close"></i></div>
                            </div> 
                        </transition-group>
                        <transition name="fade">
                            <label for="albumInput" class="albumBtn left" v-show="this.albumBtnShow">
                                <img class="imgFull" src="../../assets/up.jpg" alt="">
                            </label>
                        </transition>
                    </div> 
                </div>
                <!--        作品集锦-->
                <div class="album opus ">
                    <h3>作品集锦<span>（上传最多9张图片展示您的花艺作品）</span></h3>
                    <div class="album-wrapper clearfix">  
                        <input 
                               id="opusInput"
                               type="file"  
                               accept="image" 
                               @change="handleOpusUp">  
                        <transition-group name="fade">
                            <div 
                                 class="file-item left animated bounceIn" 
                                 :style="{animationDelay:delay(index)}"
                                 v-for="(file,index) in opusList" 
                                 :key="index">
                                <img class="imgFull" :src="file.url" alt="">
                                <div class="close" @click="removeOpus(index)"><i class="el-icon-circle-close"></i></div>
                            </div> 
                        </transition-group>
                        <transition name="fade">
                            <label for="opusInput" class="albumBtn left" v-show="this.opusBtnShow">
                                <img class="imgFull" src="../../assets/up.jpg" alt="">
                            </label>
                        </transition>
                    </div> 
                </div>
                <!--确定-->
                <div class="confirmBtn">
                    <el-button type="primary" :loading="loadingState" :disabled="false" @click="confirmPost">确定</el-button>
                </div>
            </cube-scroll>
        </div>
    </div>
</template>

<script>
    //导入相关组件
    import Top from '@/components/smallCom/Top'
    export default {
        name: 'UserInfo',
        components: {
            Top,//顶部信息组件
        },
        data () {
            return {
                loading:false,//加载动画
                imageUrl: '',//本地展示头像

                /*传输数据*/
                avatar: '',//头像
                name:'',//昵称
                sex: '',//1.女 2.男
                review:'',//简介
                teacher_id:'',//id
                teacher_feeling:'',//花艺感悟

                albumList:[],//相册列表数据
                opusList:[],//作品列表数据
                albumBtnShow:true,//个人上传按钮
                opusBtnShow:true,//作品上传按钮

                loadingState:false,//按钮是否加载中
            }
        },
        watch:{
            'albumList':function(val){//个人相册做多4张
                this.albumBtnShow = val.length>=4?false:true
            },
            'opusList':function(val){//作品相册最多9张
                this.opusBtnShow = val.length>=9?false:true
            },
        },
        created(){//初始化
            this.loading = true;
            this.Posthttp('/?method=flower.teacher.getTeacher',{member_id:this.getMemberId()},(res)=>{
                this.loading = false;
                /*登录是否成功*/
                if(JSON.parse(res.bodyText).status ===1){
                    this.teacher_id = JSON.parse(res.bodyText).data.teacher.teacher_id;//id
                    this.avatar = JSON.parse(res.bodyText).data.teacher.teacher_img;//头像
                    this.name = JSON.parse(res.bodyText).data.teacher.teacher_name;//昵称
                    this.sex = JSON.parse(res.bodyText).data.teacher.teacher_sex;//性别
                    this.review = JSON.parse(res.bodyText).data.teacher.teacher_desc;//个人介绍
                    this.teacher_feeling = JSON.parse(res.bodyText).data.teacher.teacher_feeling;//心得
                    this.albumList = JSON.parse(res.bodyText).data.teacher.photo;//相册列表数据
                    this.opusList = JSON.parse(res.bodyText).data.teacher.goodslist;//作品列表数据
                }else{
                    this.$message.warning(JSON.parse(res.bodyText).msg); 
                }
            });
        },
        methods:{
            /*
                ------ajax图片上传
            */
            postImg(baseUrl,type,cb){
                this.Posthttp('/?method=flower.pub.upload',{img:baseUrl,source:type},(res2)=>{

                    if(JSON.parse(res2.bodyText).status === 1){
                        cb(res2)
                    }else{
                        this.$message.warning(JSON.parse(res2.bodyText).msg); 
                    }
                });
            },
            /*
                --------头像上传部分
            */
            handleAvatarUp(e){
                let files = e.target.files || e.dataTransfer.files
                if (!files.length) return
                let reader = new FileReader()
                reader.readAsDataURL(files[0])
                reader.onload = (e) =>{
                    // 图片base64化
                    this.postImg(e.target.result,'avatar',(res2)=>{
                        this.avatar = JSON.parse(res2.bodyText).data.img.url 
                    })
                }
            },
            /*
                --------相册上传处理
            */
            handleAlbumUp(e){//上传
                let files = e.target.files || e.dataTransfer.files
                if (!files.length) return
                let reader = new FileReader()
                reader.readAsDataURL(files[0])
                reader.onload = (e) =>{
                    // 图片base64化
                    this.postImg(e.target.result,'photo',(res2)=>{
                        this.albumList.push({url:JSON.parse(res2.bodyText).data.img.url}); 
                    })
                }
            },
            removeAlbum(index){//删除
                this.albumList.splice(index,1);
            },
            /*
                --------作品上传处理
            */
            handleOpusUp(e){//上传
                let files = e.target.files || e.dataTransfer.files
                if (!files.length) return
                let reader = new FileReader()
                reader.readAsDataURL(files[0])
                reader.onload = (e) =>{
                    // 图片base64化
                    this.postImg(e.target.result,'goods',(res2)=>{
                        this.opusList.push({url:JSON.parse(res2.bodyText).data.img.url}); 
                    })
                }
            },
            removeOpus(index){//删除
                this.opusList.splice(index,1);
            },
            //确认提交
            confirmPost(){
                let data = {
                    teacher_id:this.teacher_id,
                    avatar:this.avatar,
                    sex:this.sex,
                    nick_name:this.name,
                    feeling:this.teacher_feeling,
                    photo:this.albumList || [],
                    goodslist:this.opusList || [],
                    description:this.review,
                }
                this.loadingState = true;
                this.Posthttp('/?method=flower.teacher.save',data,(res)=>{
                    this.loadingState = false;
                    /*登录是否成功*/
                    if(JSON.parse(res.bodyText).status ===1){
                        this.$message.success('提交成功'); 
                        this.$router.push('/bag');
                    }else{
                        this.$message.warning(JSON.parse(res.bodyText).msg); 
                    }
                });
            },
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
    .UserInfo{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        padding-top: .8rem;
        overflow-y: auto;
        background-color: #fafafa;
        .main{
            bottom: 0;
        }
        /*信息列表*/
        .infoList{
            background-color: #fff;
            padding: 0 .2rem;
            li{
                padding: .4rem 0;
                position: relative;
                color: #333;
                line-height: .3rem;
                border-bottom: 1px solid #e4e4e4;
                &:last-child{
                    border-bottom: 0;
                }
                /*头像li*/
                &.headBox{
                    #avatarInput{
                        display: none;
                    }
                    .avatarBtn{
                        width: 1.24rem;
                        height: 1.24rem;
                        display: block;
                        float: right;
                        margin-right: 9%;
                        border-radius: 100%;
                        overflow: hidden;
                    }
                    .title{
                        line-height: 1.24rem; 
                    }
                    .arrow{
                        top: .9rem;
                    }
                }
                .title{
                    float: left;
                    width: 22%;
                    font-size: .28rem;
                }
                .text{
                    width: 70%;
                    float: left;
                    text-align: right;
                    font-size: .26rem;
                    outline: none;
                    border: 0;
                }
                .arrow{
                    width: 8%;
                    text-align: right;
                    font-size: .36rem;
                    position: absolute;
                    right: 0;
                    top: .4rem;
                    color: #999;
                }
            }
        }
        /*个人相册*/
        .album{
            background-color: #fff;
            padding: .4rem .2rem;
            margin-top: .2rem;
            h3{
                font-size: .28rem;
                color: #333;
                margin-bottom: .36rem;
                span{
                    font-size: .26rem;
                    color: #999;
                }
            }
            .album-wrapper{
                /*file input*/
                #albumInput,#opusInput{
                    display: none;
                }
                /*上传按钮*/
                .albumBtn{
                    width: 1.8rem;
                    height: 1.8rem;
                    display: block;
                    border: 1px dashed #e4e4e4;
                }
                /*图片list*/
                .file-item{
                    width: 1.8rem;
                    height: 1.8rem;
                    margin-right: .14rem;
                    margin-bottom: .14rem;
                    position: relative;
                }
                /*叉叉*/
                .close{
                    position: absolute;
                    right: -.1rem;
                    top: -.1rem; 
                    background: #fff;
                    border-radius: 100%;
                    i{
                        font-size: .34rem;
                        color: #eb5b29;
                    }
                }
            }
        }
        /*作品集锦*/
        .opus{
            margin-top: 0;
            border-top:.02rem solid #e4e4e4;
        }
        /*确定*/
        .confirmBtn{
            background-color: #fff;
            padding: .4rem .2rem .2rem;
            button{
                width: 100%;
                font-size: .28rem;
            }
            .el-button--primary.is-disabled{
                background-color: #cccccc;
                border-color: #cccccc;
            }
        }
    }
</style>
